100-year-plan: Embed Calendly Widget Popup #95291

bogiii · 2024-10-10T17:29:37Z

Proposed Changes

Applied feedback from the previous two PRs that will be closed since this PR is replacement:

Updated and integrated the Calendly Popup widget
Adjusted styles to match the design
Matched "Thank you" step design showing Earth video

Testing Instructions

Go to /setup/hundred-year-plan/diy-or-difm?flags=100year%2Fvip
Click on "Schedule your fee call"
Check the embedded Calendly Popup
Schedule an event
Check if you ended up in Thank you step

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2024-10-10T17:29:52Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-121735

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-121735&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-121735&env=a8c-for-agencies

matticbot · 2024-10-10T17:40:39Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~88 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-subscriptions         -357 B  (-0.0%)      -81 B  (-0.0%)
entry-stepper               -357 B  (-0.0%)      -88 B  (-0.0%)
entry-main                  -357 B  (-0.0%)      -80 B  (-0.0%)
entry-login                 -357 B  (-0.0%)      -82 B  (-0.0%)
entry-domains-landing       -357 B  (-0.1%)      -81 B  (-0.0%)
entry-browsehappy           -357 B  (-0.2%)      -81 B  (-0.1%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~297 bytes added 📈 [gzipped])

name                           parsed_size           gzip_size
hundred-year-plan                   -681 B  (-2.0%)      -29 B  (-0.3%)
update-design-flow                   +81 B  (+0.0%)      +33 B  (+0.0%)
link-in-bio-tld-flow                 +81 B  (+0.0%)      +45 B  (+0.0%)
copy-site-flow                       +81 B  (+0.0%)      +45 B  (+0.0%)
write-flow                           +60 B  (+0.0%)      +36 B  (+0.0%)
videopress-tv-flow                   +60 B  (+0.1%)      +33 B  (+0.1%)
videopress-flow                      +60 B  (+0.0%)      +33 B  (+0.0%)
transferring-hosted-site-flow        +60 B  (+0.1%)      +33 B  (+0.1%)
sensei-flow                          +60 B  (+0.0%)      +29 B  (+0.0%)
plugin-bundle-flow                   +60 B  (+0.0%)      +34 B  (+0.0%)
import-hosted-site-flow              +60 B  (+0.0%)      +31 B  (+0.0%)
checkout                             +60 B  (+0.0%)      +25 B  (+0.0%)
build-flow                           +60 B  (+0.0%)      +39 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

bogiii · 2024-10-11T12:13:29Z

client/components/hundred-year-loader-view.tsx

+	) : (
+		<FullPageVideoContainer isMobile={ isMobile }>
+			{ videoElement }
+			{ !! loadingText && <h1 className="wp-brand-font">{ loadingText }</h1> }
 		</FullPageVideoContainer>


The HundredYearLoaderView component has been updated to support rendering video without a container so we can reuse it in different contexts.

client/landing/stepper/declarative-flow/hundred-year-plan.ts

ouikhuan

Does client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/schedule-appointment-modal.tsx still need to exist? Or it'll be handle in next PR?

bogiii · 2024-10-11T13:33:36Z

Does client/landing/stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/schedule-appointment-modal.tsx still need to exist? Or it'll be handle in next PR?

No need anymore; I'm preparing cleanup PR.

.../stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx

ouikhuan

Overall it works great! Could we also address the mobile stying too? I'm fine if you decide to handle it in a new PR too. I feel like we can do some work on the alignment here on the second line, what do you think?

bogiii · 2024-10-14T09:10:04Z

I feel like we can do some work on the alignment here on the second line, what do you think?

I've handled it explicitly to be that way.

Do you mean something like this?

bogiii · 2024-10-14T09:17:36Z

I'll deploy this PR as it is and have follow-up PRs for the minor adjustments.

ouikhuan

Do you mean something like this?

Yes, how do you feel about it?

I'll deploy this PR as it is and have follow-up PRs for the minor adjustments.

Sounds good! 🚢

a8ci18n · 2024-10-14T10:20:28Z

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/16907357

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @bogiii for including a screenshot in the description! This is really helpful for our translators.

a8ci18n · 2024-10-20T09:31:24Z

Translation for this Pull Request has now been finished.

bogiii added 11 commits October 7, 2024 13:43

Create Calendly modal component

9c5c3ea

Extend calendly widget to support customisation

ecd2a23

Integrate Calendly widget into Modal component

3f595ce

Define content and details styles

27272ec

Fix iframe container overflow style

df06702

Add mobile view support

f3c6504

Translate strings

d9d83a9

Customize modal close button to match the design

9ce5a55

Initial popup widget instead of inline embed

08c51ef

Integrate Calendly popup embed solution

dab4954

Remove unnecessary custom style

6497d59

bogiii added 2 commits October 10, 2024 19:42

Adjust style for mobile views

3f41ea6

Update calendly ID

6df2762

bogiii changed the title ~~Update/vip onboarding 2 s~~ 100-year-plan: Embed Calendly Widget Popup Oct 10, 2024

bogiii self-assigned this Oct 10, 2024

bogiii added 8 commits October 10, 2024 23:41

Update calendly config id

b8cb2f1

Update flow to redirect on thank-you page

623c5f6

Update wrapper step to support hiding sidebar

1195ef9

Extend VideoLoader component to support hidding wrapper contianer

1abae9b

Match thank you step design

512f257

Remove button's box shadow

b942f5a

Close opened popup in the cleanup function

0ab5d07

Improve UX when user scheduled meeting

7610c5a

bogiii requested a review from a team October 11, 2024 12:08

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 11, 2024

bogiii commented Oct 11, 2024

View reviewed changes

Hide gdpr banner

9b2b0dd

bogiii commented Oct 11, 2024

View reviewed changes

client/landing/stepper/declarative-flow/hundred-year-plan.ts Show resolved Hide resolved

bogiii marked this pull request as ready for review October 11, 2024 12:21

ouikhuan reviewed Oct 11, 2024

View reviewed changes

Change Calendly primary color

bf1802c

This was referenced Oct 11, 2024

100-year-plan: Integrate Calendly widget into Modal #95195

Closed

100-year-plan: Style thank you step and handle on appointment schedule event #95257

Closed

100-year-plan: Clean up Calendly integration flow #95320

Closed

ouikhuan reviewed Oct 11, 2024

View reviewed changes

.../stepper/declarative-flow/internals/steps-repository/hundred-year-plan-diy-or-difm/index.tsx Outdated Show resolved Hide resolved

bogiii added 8 commits October 11, 2024 16:13

Typo: Add missing column

5c1d6a0

Create use-calendly-widget hook

96c4590

Replace Calendly component with a new hook solution

bdea1d9

Add missing button margin

5dd8540

Remove unused way of calendly integration

749eff9

Fix typo in path of calendly widget logic

0317bad

Delete obsolete schedule appointment modal solution

d1aae3c

Delete obsolete schedule appointment step solution

1ec04e9

ouikhuan reviewed Oct 14, 2024

View reviewed changes

bogiii merged commit 7f651f2 into trunk Oct 14, 2024
11 checks passed

bogiii deleted the update/vip-onboarding-2-s branch October 14, 2024 09:19

ouikhuan approved these changes Oct 14, 2024

View reviewed changes

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Oct 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

100-year-plan: Embed Calendly Widget Popup #95291

100-year-plan: Embed Calendly Widget Popup #95291

bogiii commented Oct 10, 2024 •

edited

Loading

github-actions bot commented Oct 10, 2024 •

edited by matticbot

Loading

matticbot commented Oct 10, 2024 •

edited

Loading

bogiii Oct 11, 2024

ouikhuan left a comment

bogiii commented Oct 11, 2024

ouikhuan left a comment

bogiii commented Oct 14, 2024

bogiii commented Oct 14, 2024

ouikhuan left a comment

a8ci18n commented Oct 14, 2024

a8ci18n commented Oct 20, 2024

100-year-plan: Embed Calendly Widget Popup #95291

100-year-plan: Embed Calendly Widget Popup #95291

Conversation

bogiii commented Oct 10, 2024 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Oct 10, 2024 • edited by matticbot Loading

matticbot commented Oct 10, 2024 • edited Loading

bogiii Oct 11, 2024

Choose a reason for hiding this comment

ouikhuan left a comment

Choose a reason for hiding this comment

bogiii commented Oct 11, 2024

ouikhuan left a comment

Choose a reason for hiding this comment

bogiii commented Oct 14, 2024

bogiii commented Oct 14, 2024

ouikhuan left a comment

Choose a reason for hiding this comment

a8ci18n commented Oct 14, 2024

a8ci18n commented Oct 20, 2024

bogiii commented Oct 10, 2024 •

edited

Loading

github-actions bot commented Oct 10, 2024 •

edited by matticbot

Loading

matticbot commented Oct 10, 2024 •

edited

Loading